﻿@model AMG.UserForms.ViewModels.ArchitecturalChange

@{
    ViewBag.Title = "Index";
}

<h2>Architectural Change Request</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm("Index", "ArchChange", FormMethod.Post, new {enctype="multipart/form-data"}))
{
    @Html.ValidationSummary(true)
    <fieldset>
       
        <legend>Contact Information</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.MemberName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.MemberName)
            @Html.ValidationMessageFor(model => model.MemberName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.AssociationName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.AssociationName)
            @Html.ValidationMessageFor(model => model.AssociationName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Address1)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address1)
            @Html.ValidationMessageFor(model => model.Address1)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Address2)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address2)
            @Html.ValidationMessageFor(model => model.Address2)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.City)
            @Html.ValidationMessageFor(model => model.City)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.State)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.State, new SelectList(new List<string> { "NC", "SC" }))
            @Html.ValidationMessageFor(model => model.State)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Phone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone)
            @Html.ValidationMessageFor(model => model.Phone)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
    </fieldset>

    <fieldset>
        <legend>Your Proposed Change</legend>
    
        <div class="editor-field">
            <input type="radio" name="userType" value="Fences or retaining walls" onclick="SetProposedChange(this.value);" /> 
            Fences or retaining walls
            <br />
            <input type="radio" name="userType" value="Driveway or Walkways" onclick="SetProposedChange(this.value);" />
            Driveway or Walkways
            <br />
            <input type="radio" name="userType" value="Painting new color" onclick="SetProposedChange(this.value);" />
            Painting new color
            <br />
            <input type="radio" name="userType" value="Garage doors or exterior doors" onclick="SetProposedChange(this.value);" />
            Garage doors or exterior doors
            <br />
            <input type="radio" name="userType" value="Other" onclick="SetProposedChange(document.getElementById('proposedChangeOther').value);"  />
            Other <input type="text" id="proposedChangeOther" onkeyup="SetProposedChange(this.value);" />
            <br />
            <br />
            @Html.ValidationMessageFor(model => model.ProposedChange)

            @Html.HiddenFor(model => model.ProposedChange)
        </div>
    </fieldset>
    
    <fieldset>
        <legend>@Html.LabelFor(model => model.Description) (please be specific)</legend>

        <div class="editor-field">
            @Html.TextAreaFor(model => model.Description, 10, 80, null)
            @Html.ValidationMessageFor(model => model.Description)
        </div>
    </fieldset>
    
    <fieldset>
        <legend>Possibly Required Documents for Consideration</legend>

            @Html.CheckBoxFor(model => model.ElevationsAttached) 
            @Html.LabelFor(model => model.ElevationsAttached)
            @Html.ValidationMessageFor(model => model.ElevationsAttached)
      
            <br />
        
            @Html.CheckBoxFor(model => model.SitePlanAttached) 
            @Html.LabelFor(model => model.SitePlanAttached)
            @Html.ValidationMessageFor(model => model.SitePlanAttached)
      
            <br />
       
            @Html.CheckBoxFor(model => model.ColorSamplesAttached) 
            @Html.LabelFor(model => model.ColorSamplesAttached)
            @Html.ValidationMessageFor(model => model.ColorSamplesAttached)
      
            <br />
        
            @Html.CheckBoxFor(model => model.ExtrasAttached)
            @Html.LabelFor(model => model.ExtrasAttached)
            @Html.ValidationMessageFor(model => model.ExtrasAttached)

            <br />

            @if (Request.Browser.Browser.ToLower() != "firefox")
            {
                <img src="../../Content/images/addFile.gif" alt="Add another file" onclick="AddAnotherFile();"/> <text>Add another file</text> 
               
                <span id="fileUploads" style="width:50px">
                    <br />
                    <input type="file" size="50" id="firstFile" name="firstFile" /> 
                    <br />
                </span>
            }
            else
            {
                <input type="file" id="fileToUpload" name="fileToUpload" onchange="AddFileToList();" size="50"/> 

                <div id="fileList"></div>
            }

    </fieldset>
    
    <fieldset>

        <legend>Agreements</legend>

        @{ var index = 0; }
        @foreach (var agreement in Model.AgreementList)
        {
            var id = string.Format("AgreementList[{0}].AgreeChecked", index);
            
            <input type="checkbox" id="@id" name="@id" onclick="AreAllAgreementsChecked();" /> @agreement.AgreementText

            <br />
            
            { index++; }
        }

        <input type="hidden" id="numberOfAgreements" value="@index" />
        @Html.HiddenFor(model => model.AllAgreementsChecked)

        @Html.ValidationMessageFor(model => model.AllAgreementsChecked)
        
        <div class="editor-label">
            @Html.LabelFor(model => model.MemberSignature) 
            @Html.EditorFor(model => model.MemberSignature)
            @Html.ValidationMessageFor(model => model.MemberSignature)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DateSubmitted) 
            @Html.DisplayFor(model => model.DateSubmitted)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

}

<script language="javascript" type="text/javascript">

    function AddAnotherFile() {
        
        var newFileUpload = document.createElement("input");
        newFileUpload.setAttribute("type", "file");
        newFileUpload.setAttribute("size", "50");
        newFileUpload.setAttribute("id", new Date().getTime());
        newFileUpload.setAttribute("name", new Date().getTime());

        var br = document.createElement("br");

        var fileUploads = document.getElementById("fileUploads");
        fileUploads.appendChild(newFileUpload);
        fileUploads.appendChild(br);
    }

    function AreAllAgreementsChecked(proposedChangeValue) {

        var numAgreements = $("#numberOfAgreements").val();

        for (var index = 0; index < numAgreements; index++) {
            if ($("input[name='AgreementList[" + index + "].AgreeChecked']:checked").val() == undefined) {
                $("#AllAgreementsChecked").val("");
                return;
            }
        }

        $("#AllAgreementsChecked").val("True");
    }

    function SetProposedChange(proposedChangeValue) {
        var proposedChange = $("#ProposedChange");
        proposedChange.val(proposedChangeValue);
    }

    function AddFileToList() {

        var fileInput;
        var file;

        if ($.browser.msie) {
            fileInput = document.getElementById("fileToUpload");
            alert(fileInput.attributes);
            file = fileInput.files[0];
        }
        else {
            fileInput = $("#fileToUpload");
            file = fileInput.get(0).files[0];
        }

        if (file.fileName.indexOf(".bas") > -1 ||
            file.fileName.indexOf(".bat") > -1 ||
            file.fileName.indexOf(".chm") > -1 ||
            file.fileName.indexOf(".cmd") > -1 ||
            file.fileName.indexOf(".com") > -1 ||
            file.fileName.indexOf(".dll") > -1 ||
            file.fileName.indexOf(".exe") > -1 ||
            file.fileName.indexOf(".hlp") > -1 ||
            file.fileName.indexOf(".js") > -1 ||
            file.fileName.indexOf(".jse") > -1 ||
            file.fileName.indexOf(".msi") > -1 ||
            file.fileName.indexOf(".sys") > -1 ||
            file.fileName.indexOf(".vb") > -1 ||
            file.fileName.indexOf(".vbe") > -1 ||
            file.fileName.indexOf(".vbs") > -1 ||
            file.fileName.indexOf(".wsc") > -1) {
            fileInput.val("");
            alert("Selected file is not an allowable file format");
            return;
        }

        var fileList = $("#fileList");

        fileList.fadeOut(100, function () {

            fileList.load('@Url.Action("AddFileToList", "ArchChange")', { fileData: file.getAsDataURL(), fileName: file.fileName }, function () {
                fileInput.val("");
                fileList.delay(400).fadeIn("normal");
            });

        });
    }

    function RemoveFile(index) {
        var fileList = $("#fileList");

        fileList.fadeOut("normal", function () {
            var urlAction = '@Url.Action("RemoveFileFromList", "ArchChange")';
            urlAction = urlAction + "?index=" + index;
           
            fileList.load(urlAction, function () {
                fileList.delay(400).fadeIn("normal");
            });
        }); 
    }
</script>
